<template>
	<view class="user">
		<view class="info">
			<image src="/static/img/new.png" mode="widthFix"></image>
			<view class="u-user">
				<view class="name">{{ nickName }}</view>
				<view class="title">注册会员</view>
			</view>
		</view>
		<view class="colum" @click="goFavPage"><text>我的收藏</text><text class="count"> {{ fav }} ></text></view>
		<view class="colum" @click="goOrderPage"><text>我的订单</text><text class="count"> {{ order }} ></text></view>
		<view class="adv">
			<image src="/static/img/logo.png" mode="widthFix"></image>
			<view class="log-out" @click="logout">退出</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onReady
	} from "@dcloudio/uni-app";
	import {
		IMG_URL,
		BASE_URL
	} from "@/config/index.js"

	const nickName = ref('')
	const fav = ref(0)
	const order = ref(0)

	const goFavPage = () => {
		uni.navigateTo({
			url: '/pages/otherPages/fav'
		})
	}

	const goOrderPage = () => {
		uni.switchTab({
			url: '/pages/tabBarPages/order/index'
		})
	}

	const logout = () => {
		uni.clearStorageSync('USER_TOKENS')
		uni.redirectTo({
			url: '/pages/tabBarPages/home/index'
		})
	}

	const getUserInfo = (token) => {
		uni.request({
			url: `${BASE_URL}userInfo`,
			header: {
				Authorization: 'bearer ' + token
			},
			success: res => {
				const {
					favCount,
					orderCount
				} = res.data.data
				fav.value = favCount
				order.value = orderCount
			}
		});
	}

	onShow(() => {
		const {
			token
		} = uni.getStorageSync('USER_TOKENS') || {}
		if (!token) {
			uni.redirectTo({
				url: '/pages/otherPages/login'
			})
			return
		} else {
			getUserInfo(token)
		}
	})

	onReady(() => {
		const {
			nickname
		} = uni.getStorageSync('USER_TOKENS') || {}
		nickName.value = nickname
	})
</script>

<style lang="scss" scoped>
	.user {
		display: flex;
		flex-flow: column wrap;
		align-content: center;
		height: 100vh;

		.info {
			display: flex;
			flex-flow: row wrap;
			align-items: flex-start;
			padding: 40rpx 30rpx;

			image {
				width: 120rpx;
				height: 120rpx !important;
				background: red;
				line-height: initial;
				margin: initial;
				padding: initial;
				border-radius: 50%;
			}

			.u-user {
				margin-left: 30rpx;

				.title {
					margin-top: 10rpx;
					color: #999;
					font-size: 24rpx;
				}
			}
		}

		.adv {
			width: 700rpx;
			text-align: center;
			margin-top: auto;
			margin-bottom: 40rpx;

			image {
				width: 300rpx;
				bottom: 80rpx;
				filter: grayscale(100%);
				opacity: .5;
				position: relative;
			}

			.log-out {
				background: #b10936;
				padding: 20rpx 0;
				color: #fff;
				border-radius: 10rpx;
			}
		}

		.colum {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
			border-top: 1rpx solid #efefef;
			border-bottom: 1rpx solid #efefef;

			text {
				margin-left: 10rpx;
			}

			.count {
				margin-left: auto;
			}
		}
	}
</style>